{% extends "@XiaoZhu/base/frame.html.twig" %}

    {% block site_title %}
        <title>{{ product.name }}</title>
    {% endblock %}
{% block content_header %}
{% endblock %}

{% block content_main %}
    <div class="main">
        <div class="container">
            <ul class="breadcrumb">
                {% block siteLocation %}
                    <li><a href="{{ path('shophome') }}">首页</a></li>
                    <li>产品列表</li>
                    <li>产品详情</li>
                    <li class="active">{{ product.name }}</li>
                {% endblock %}
            </ul>
            <!-- BEGIN SIDEBAR & CONTENT -->
            <div class="row margin-bottom-40">
                {% block articleLeft %}
                    <div class="sidebar col-md-3 col-sm-3">
                        <div class="sidebar-products clearfix">
                            <h2>相似产品</h2>
                            {% for product in ProductSame %}
                                {% include("XiaoZhuBundle:inc:ProductListItemSidebar.html.twig") %}
                            {% endfor %}
                        </div>
                    </div>
                {% endblock %}
                {% block articleRight %}
                    <div class="col-md-9 col-sm-9">
                        <div class="content-page">
                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="product-main-image" style="position: relative; overflow: hidden;">
                                        <img src="{{ asset(product.img1) }}" alt="Cool green dress with red bell" class="img-responsive" data-bigimgsrc="{{ asset(product.img1) }}">
                                        <img src="{{ asset(product.img1) }}" class="zoomImg" style="position: absolute; top: -157.410852713178px; left: -201.441860465116px; opacity: 0; width: 1200px; height: 1600px; border: none; max-width: none;">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <h1>{{ product.name }}</h1>
                                    <div class="price-availability-block clearfix">
                                        <div class="price">
                                            <strong><span>￥</span>{{ product.price }}</strong>
                                            <em>￥<span>{{ product.marketPrice }}</span></em>
                                        </div>
                                        <div class="availability">
                                            是否有货: <strong>有货</strong>
                                        </div>
                                    </div>
                                    <div class="description">
                                        <p>{{ product.info }}</p>
                                    </div>
                                    {#<div class="product-page-options">#}
                                        {#<div class="pull-left">#}
                                            {#<label class="control-label">Size:</label>#}
                                            {#<select class="form-control input-sm">#}
                                                {#<option>L</option>#}
                                                {#<option>M</option>#}
                                                {#<option>XL</option>#}
                                            {#</select>#}
                                        {#</div>#}
                                        {#<div class="pull-left">#}
                                            {#<label class="control-label">Color:</label>#}
                                            {#<select class="form-control input-sm">#}
                                                {#<option>Red</option>#}
                                                {#<option>Blue</option>#}
                                                {#<option>Black</option>#}
                                            {#</select>#}
                                        {#</div>#}
                                    {#</div>#}

                                    <div class="product-page-cart">
                                        <div class="product-quantity">
                                            <input id="product-quantity_{{ product.id }}" type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
                                        </div>
                                        <button class="btn btn-primary" type="submit" onclick="add2Cart( {{ product.id }} , $('#product-quantity_{{ product.id }}').val() , {{ product.price }})">添加到购物车</button>
                                    </div>
                                    <div class="review margin-top-10 margin-bottom-20">
                                        用户评价：
                                        <div class="rateit" data-rateit-value="{{ product.stars ? product.stars : 5 }}" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                        {#<a href="#">7 reviews</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Write a review</a>#}
                                    </div>
                                    {#<ul class="social-icons margin-top-10 margin-bottom-20">#}
                                        {#<li><a class="facebook" data-original-title="facebook" href="#"></a></li>#}
                                        {#<li><a class="twitter" data-original-title="twitter" href="#"></a></li>#}
                                        {#<li><a class="googleplus" data-original-title="googleplus" href="#"></a></li>#}
                                        {#<li><a class="evernote" data-original-title="evernote" href="#"></a></li>#}
                                        {#<li><a class="tumblr" data-original-title="tumblr" href="#"></a></li>#}
                                    {#</ul>#}

                                    <div class="product-other-images margin-top-10 margin-bottom-20">
                                        <a href="#" class="active"><img src="{{ asset(product.img1) }}"></a>
                                        <a href="#"><img src="{{ asset(product.img2) }}"></a>
                                        <a href="#"><img src="{{ asset(product.img3) }}"></a>
                                    </div>
                                    <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a></div>
                                    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin","sqq"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin","sqq"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                                </div>

                                <div class="product-page-content">
                                    <ul id="myTab" class="nav nav-tabs">
                                        <li class="active"><a href="#Description" data-toggle="tab">图文介绍</a></li>
                                        <li class=""><a href="#Information" data-toggle="tab">产品参数</a></li>
                                        <li class=""><a href="#Reviews" data-toggle="tab">用户评价</a></li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div class="tab-pane fade active in" id="Description">
                                            {% for pic in product.intro %}
                                                <img src="{{ pic }}" alt="产品图片" style="width: 100%;height: auto;"/>
                                            {% endfor %}
                                        </div>
                                        <div class="tab-pane fade" id="Information">
                                            <table class="datasheet">
                                                <tbody>
                                                <tr>
                                                    <th colspan="2">产品资料</th>
                                                </tr>
                                                {% for param in  product.params %}
                                                    <tr>
                                                        <td class="datasheet-features-type">{{ param.name.str }}</td>
                                                        <td>{{ param.value.str }}</td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="tab-pane fade" id="Reviews">
                                            <!--<p>There are no reviews for this product.</p>-->
                                            <div class="review-item clearfix">
                                                <div class="rateit pull-left" data-rateit-value="{{ product.stars ? product.stars : 5 }}" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;综合评价&nbsp;({{ product.stars }})</strong>
                                                <em></em>
                                            </div>
                                            <div class="review-item clearfix">
                                                <div style="margin-top: 6px" class="rateit pull-left" data-rateit-value="1" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;一星评价&nbsp;(<span>{{ product.star1 }}</span>)</strong>
                                                {% if comments == 0 %}
                                                &nbsp;&nbsp; &nbsp;&nbsp;<button type="submit" class="btn btn-primary subStar">评价</button>
                                                {% endif %}
                                            </div>
                                            <div class="review-item clearfix">
                                                <div style="margin-top: 6px" class="rateit pull-left" data-rateit-value="2" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;二星评价&nbsp;(<span>{{ product.star2 }}</span>)</strong>
                                                {% if comments == 0 %}
                                                    &nbsp;&nbsp; &nbsp;&nbsp;<button type="submit" class="btn btn-primary subStar">评价</button>
                                                {% endif %}
                                            </div>
                                            <div class="review-item clearfix">
                                                <div style="margin-top: 6px" class="rateit pull-left" data-rateit-value="3" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;三星评价&nbsp;(<span>{{ product.star3 }}</span>)</strong>
                                                {% if comments == 0 %}
                                                    &nbsp;&nbsp; &nbsp;&nbsp;<button type="submit" class="btn btn-primary subStar">评价</button>
                                                {% endif %}
                                            </div>
                                            <div class="review-item clearfix">
                                                <div style="margin-top: 6px" class="rateit pull-left" data-rateit-value="4" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;四星评价&nbsp;(<span>{{ product.star4 }}</span>)</strong>
                                                {% if comments == 0 %}
                                                    &nbsp;&nbsp; &nbsp;&nbsp;<button type="submit" class="btn btn-primary subStar">评价</button>
                                                {% endif %}
                                            </div>
                                            <div class="review-item clearfix">
                                                <div style="margin-top: 6px" class="rateit pull-left" data-rateit-value="5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
                                                <strong> &nbsp;&nbsp;五星评价&nbsp;(<span>{{ product.star5 }}</span>)</strong>
                                                {% if comments == 0 %}
                                                    &nbsp;&nbsp; &nbsp;&nbsp;<button type="submit" class="btn btn-primary subStar">评价</button>
                                                {% endif %}
                                            </div>
                                            {#<div class="review-item clearfix">#}
                                                {#<div class="review-item-submitted">#}
                                                    {#<strong>Mary</strong>#}
                                                    {#<em>13/12/2013 - 17:49</em>#}
                                                    {#<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"><button id="rateit-reset-4" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-4" style="display: none;"></button><div id="rateit-range-4" class="rateit-range" tabindex="0" role="slider" aria-label="rating" aria-owns="rateit-reset-4" aria-valuemin="0" aria-valuemax="5" aria-valuenow="2.5" aria-readonly="true" style="width: 80px; height: 16px;"><div class="rateit-selected rateit-preset" style="height: 16px; width: 40px;"></div><div class="rateit-hover" style="height: 16px;"></div></div></div>#}
                                                {#</div>#}
                                                {#<div class="review-item-content">#}
                                                    {#<p>Sed velit quam, auctor id semper a, hendrerit eget justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel arcu pulvinar dolor tempus feugiat id in orci. Phasellus sed erat leo. Donec luctus, justo eget ultricies tristique, enim mauris bibendum orci, a sodales lectus purus ut lorem.</p>#}
                                                {#</div>#}
                                            {#</div>#}

                                            <!-- BEGIN FORM-->
                                            {#<form action="#" class="reviews-form" role="form">#}
                                                {#<h2>Write a review</h2>#}
                                                {#<div class="form-group">#}
                                                    {#<label for="name">Name <span class="require">*</span></label>#}
                                                    {#<input type="text" class="form-control" id="name">#}
                                                {#</div>#}
                                                {#<div class="form-group">#}
                                                    {#<label for="email">Email</label>#}
                                                    {#<input type="text" class="form-control" id="email">#}
                                                {#</div>#}
                                                {#<div class="form-group">#}
                                                    {#<label for="review">Review <span class="require">*</span></label>#}
                                                    {#<textarea class="form-control" rows="8" id="review"></textarea>#}
                                                {#</div>#}
                                                {#<div class="form-group">#}
                                                    {#<label for="email">Rating</label>#}
                                                    {#<input type="range" value="4" step="0.25" id="backing5" style="display: none;">#}
                                                    {#<div class="rateit" data-rateit-backingfld="#backing5" data-rateit-resetable="false" data-rateit-ispreset="true" data-rateit-min="0" data-rateit-max="5">#}
                                                        {#<button id="rateit-reset-5" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-5" style="display: none;"></button><div id="rateit-range-5" class="rateit-range" tabindex="0" role="slider" aria-label="rating" aria-owns="rateit-reset-5" aria-valuemin="0" aria-valuemax="5" aria-valuenow="4" aria-readonly="false" style="width: 80px; height: 16px;"><div class="rateit-selected rateit-preset" style="height: 16px; width: 64px;"></div><div class="rateit-hover" style="height: 16px;"></div></div></div>#}
                                                {#</div>#}
                                                {#<div class="padding-top-20">#}
                                                    {#<button type="submit" class="btn btn-primary">Send</button>#}
                                                {#</div>#}
                                            {#</form>#}
                                            <!-- END FORM-->
                                        </div>
                                    </div>
                                </div>

                                <div class="sticker sticker-sale"></div>
                            </div>
                        </div>
                    </div>
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}

{% block content_footer %}
<div class="container">
    <!-- BEGIN SALE PRODUCT & NEW ARRIVALS -->
    <div class="row margin-bottom-40">
        <!-- BEGIN SALE PRODUCT -->
        <div class="col-md-12 sale-product">
            <h2>小主们都在买什么</h2>
            <div class="bxslider-wrapper">
                <ul class="bxslider" data-slides-phone="1" data-slides-tablet="2" data-slides-desktop="5" data-slide-margin="15">
                    {% for product in ProductNew %}
                        {% include("XiaoZhuBundle:inc:ProductListItemNew.html.twig") %}
                    {% endfor %}
                </ul>
            </div>
        </div>
        <!-- END SALE PRODUCT -->
    </div>
    <!-- END SALE PRODUCT & NEW ARRIVALS -->
</div>

    <link href="{{ asset("bundles/xiaozhu/plugins/rateit/src/rateit.css") }}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{{ asset("bundles/xiaozhu/plugins/rateit/src/jquery.rateit.js") }}"></script>
    <script>
        $(function () {
            $(".subStar").click(function () {
                $(this).parent().find("strong span").text(parseInt($(this).parent().find("strong").find("span").text()) + 1);
                $.get(
                        "{{ path("ProductSubmitStar") }}?pid={{ product.id }}&score=" + $(this).parent().find("div").attr("data-rateit-value"),
                        function () {
                            $(".subStar").addClass("disabled");
                        }
                );
            });
        });
    </script>
{% endblock %}

{% block product_pop_up %}
    {% set ProductPopUps = ProductNew %}
    {% include("XiaoZhuBundle:inc:ProductPopUps.html.twig") %}
{% endblock %}